<template>
  <nav>
    <el-menu mode="horizontal">
      <el-menu-item index="1">
        <router-link to="/products">商品列表</router-link>
      </el-menu-item>
      <el-menu-item index="2">
        <router-link to="/cart">购物车</router-link>
      </el-menu-item>
      <el-menu-item index="6">
        <router-link to="/orders">订单管理</router-link>
      </el-menu-item>
      <el-menu-item index="3">
        <router-link to="/login">登录</router-link>
      </el-menu-item>
      <el-menu-item index="4">
        <router-link to="/register">注册</router-link>
      </el-menu-item>
      <el-menu-item index="5">
        <router-link to="/wishlist">收藏夹</router-link>
      </el-menu-item>
    </el-menu>
    <!-- 搜索框 -->
    <el-input
      placeholder="请输入搜索内容"
      v-model="searchQuery"
      @input="debouncedSearch"
      clearable>
      <el-button slot="append" icon="el-icon-search" @click="debouncedSearch"></el-button>
    </el-input>
  </nav>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'NavBar',
  data() {
    return {
      searchQuery: '',
      debounceTimer: null,
    };
  },
  methods: {
    debouncedSearch: _.debounce(function () {
      this.$emit('search', this.searchQuery);
    }, 300),
  },
};
</script>